<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://java.sun.com/jsf/passthrough">
    <h:body>

    <ui:composition template="./Templates/TemplateInterno.xhtml">
    <ui:define name="topoInterno"></ui:define>        
    <ui:define name="content">
    <h:panelGroup layout="block" class="container">
        <h:panelGroup layout="block" class="modal fade" id="myModal" p:role="dialog">
            <h:panelGroup layout="block" class="modal-dialog modal-sm">
                <h:panelGroup layout="block" class="modal-content">
                    <h:panelGroup layout="block" class="modal-header">
                      <h:outputLabel class="modal-title" id="myModalLabel" value="Adicionar Nova Categoria" styleClass="font-size:large"/>
                    </h:panelGroup>
                        <h:form role="form">
                            <h:panelGroup layout="block" class="modal-body"> 
                                <h:panelGroup layout="block" class="form-group">
                                    <h:outputLabel value="Nome"/>
                                    <h:panelGroup layout="block" class="input-group">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-list-alt"></span></span>
                                        <h:inputText required="true" value="#{categoriaMB.categoria.nome}" maxlength="50" class="form-control" requiredMessage="Informe o usuario"/>
                                    </h:panelGroup>
                                </h:panelGroup>
                                     <h:outputLabel value="Tipo de Categoria"/>
                                    <h:panelGroup layout="block" class="input-group">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                                        <h:selectOneMenu value="#{categoriaMB.idTipo}" style="width:200px;height:30px;border-radius:3px;">
                                            <f:selectItems value="#{tipoMovimentacaoMB.lista}"/>   							
                                        </h:selectOneMenu>
                                    </h:panelGroup>    
                            </h:panelGroup>
                            
                            <h:panelGroup layout="block" class="modal-footer">
                                <h:commandButton value="Cancelar" class="btn btn-danger" p:data-dismiss="modal"/>
                                <h:commandButton value="Salvar" class="btn btn-success " type="submit">
                                    <f:ajax event="click" listener="#{categoriaMB.addCategoria}" execute="@all"/>
                                </h:commandButton> 
                            </h:panelGroup>
                        </h:form>  
                </h:panelGroup>
            </h:panelGroup>
        </h:panelGroup>
   </h:panelGroup>
        <!--######################## modal editar#######################-->
    <h:panelGroup layout="block" class="container">
        <div layout="block" class="modal fade" id="myModaledit" role="dialog">
            <h:panelGroup layout="block" class="modal-dialog modal-sm">
                <h:panelGroup layout="block" class="modal-content">
                    <h:panelGroup layout="block" class="modal-header">
                      <h:outputLabel class="modal-title" id="myModalLabeledit" value="Editar Categoria" styleClass="font-size:large"/>
                    </h:panelGroup>
                        <h:form role="form" id="forma">
                            <h:panelGroup layout="block" class="modal-body"> 
                                <h:panelGroup layout="block" class="form-group">
                                    <h:outputLabel value="Nome"/>
                                    <h:panelGroup layout="block" class="input-group">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-list-alt"></span></span>
                                        <h:inputText required="true" value="#{categoriaMB.categoriaEdit.nome}" maxlength="50" class="form-control" requiredMessage="Informe o usuario"/>
                                    </h:panelGroup>
                                </h:panelGroup>
                                     <h:outputLabel value="Tipo de Categoria"/>
                                    <h:panelGroup layout="block" class="input-group">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
                                        <h:selectOneMenu value="#{categoriaMB.idTipo}" style="width:200px;height:30px;border-radius:3px;">
                                            <f:selectItems value="#{tipoMovimentacaoMB.lista}"/>   							
                                        </h:selectOneMenu>
                                    </h:panelGroup>    
                            </h:panelGroup>               
                            <h:panelGroup layout="block" class="modal-footer">
                                <h:commandButton value="Cancelar" class="btn btn-danger" p:data-dismiss="modal"/>
                                <h:commandButton value="Salvar" class="btn btn-success" type="submit">
                                    <f:ajax event="click" listener="#{categoriaMB.atualizarCategoria}" execute="@all"/>
                                </h:commandButton> 
                            </h:panelGroup>
                        </h:form>  
                </h:panelGroup>
            </h:panelGroup>
        </div>
    </h:panelGroup>
        <!--  ###################################################-->
        <br/>
        <br/>
        <br/>
        <h:panelGroup layout="block" class="container">
            <h:panelGroup layout="block" class="row">
                <h:panelGroup layout="block" class="col-md-1"></h:panelGroup>
                <h:panelGroup layout="block" class="col-md-9">
                    <h:panelGroup layout="block" class="panel panel-default"> 
                        <h:panelGroup layout="block" class="panel-body">
                            <h:panelGroup layout="block" class="page-header">
                                    <h3>Minhas Categorias</h3>
                                     <h:commandButton value="+" styleClass="btn btn-success btn-min">
                                        <f:passThroughAttribute name="data-toggle" value="modal" />
                                        <f:passThroughAttribute name="data-target" value="#myModal" />
                                    </h:commandButton> &nbsp; &nbsp;  
                            </h:panelGroup>
                        <center>
                            <h:form id="tableConta">
                                <h:dataTable value="#{categoriaMB.listarCategorias()}" var ="catg" class="table table-striped table-hover table-responsive">
                                    <h:column>
                                        <f:facet name="header">Nome</f:facet>
                                        #{catg.nome}
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">Tipo da Categoria</f:facet>
                                        #{catg.idTipoMovimentacao.descricao}
                                    </h:column>
                                        <h:column>
                                    <f:facet name="header">Ação</f:facet>
                                        <h:commandLink>
                                            <f:ajax event="click" render="myModaledit forma" listener="#{categoriaMB.editarCategoria(catg)}"/>
                                            <span class="glyphicon glyphicon-pencil"></span>
                                            <f:passThroughAttribute name="data-toggle" value="modal"/>
                                            <f:passThroughAttribute name="data-target" value="#myModaledit"/>
                                        </h:commandLink> &nbsp;&nbsp;               
                                        <h:commandLink  onclick="return confirm('Deseja realmente excluir a Categoria ?');" value="" styleClass="greyishBtn submitForm" 
                                                action="#{categoriaMB.deletarCategoria(catg)}">
                                            <f:ajax execute="@form"  render="tableConta"/>
                                            <span class="glyphicon glyphicon-trash"></span>
                                        </h:commandLink>
                                    </h:column>
                                </h:dataTable>
                            </h:form>   
                        </center> 
                        </h:panelGroup>
                    </h:panelGroup>
                </h:panelGroup>
            </h:panelGroup>
        </h:panelGroup>
    </ui:define>
<ui:define name="rodape"></ui:define>
</ui:composition>
</h:body>
</html>
